<!DOCTYPE html>
<html>
	<head>
		<%-include("./public/head.ejs")%>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<%-include("./public/header.ejs")%>
			<%-include("./public/left-side.ejs")%>

			<div class="layui-body">
				<!-- 内容主体区域 -->
				<div style="padding: 15px;">
					<table
						class="layui-hide"
						id="demo"
						lay-filter="test"
					></table>

					<script type="text/html" id="barDemo">
						<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>
				</div>
			</div>

			<%-include("./public/footer.ejs")%>
		</div>

		<script type="text/javascript">
			//JavaScript代码区域
			layui.use(["element", "laypage", "layer", "table"], function() {
				var element = layui.element,
					laypage = layui.laypage, //分页
					layer = layui.layer, //弹层
					table = layui.table,
					$ = layui.$; //表格;

				//执行一个 table 实例
				table.render({
					elem: "#demo",
					height: 564,
					url: "/admin/white_ip/list/", //数据接口
					title: "IP 白名单",
					page: true, //开启分页
					toolbar: "default", //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
					totalRow: false, //开启合计行
					cols: [
						[
							{ type: "checkbox", fixed: "left" },
							{
								field: "id",
								title: "ID",
								width: 80,
								sort: true,
								fixed: "left",
								totalRowText: ""
							},
							{
								field: "ip",
								title: "IP",
								width: 220
							},
							{
								field: "updated_by",
								title: "最后修改时间",
								width: 200
							},
							{
								field: "created_by",
								title: "创建时间",
								width: 200
							},
							{
								fixed: "right",
								width: 165,
								align: "center",
								toolbar: "#barDemo"
							}
						]
					]
				});

				//监听头工具栏事件
				table.on("toolbar(test)", function(obj) {
					var checkStatus = table.checkStatus(obj.config.id),
						data = checkStatus.data; //获取选中的数据
					switch (obj.event) {
						case "add":
							// layer.msg("添加");
							layer.open({
								title: "新建白名单",
								skin: "layui-layer-rim", //加上边框
								maxmin: true,
								type: 2,
								content: "/admin/white_ip/edit",
								area: ["360px", "240px"],
								end: function() {
									$(".layui-laypage-btn").click();
								}
							});
							break;
						case "update":
							if (data.length === 0) {
								layer.msg("请选择一行");
							} else if (data.length > 1) {
								layer.msg("只能同时编辑一个");
							} else {
								layer.open({
									title: "修改白名单",
									skin: "layui-layer-rim", //加上边框
									maxmin: true,
									type: 2,
									content:
										"/admin/white_ip/edit?id=" +
										checkStatus.data[0].id,
									area: ["360px", "240px"],
									end: function() {
										$(".layui-laypage-btn").click();
									}
								});
							}
							break;
						case "delete":
							if (data.length === 0) {
								layer.msg("请选择一行");
							} else {
								layer.confirm("真的删除行么", function(index) {
									// obj.del(); //删除对应行（tr）的DOM结构
									layer.close(index);
									//向服务端发送删除指令
									$.ajax({
										type: "post",
										url: "/admin/white_ip/del",
										data: { id: checkStatus.data[0].id },
										success: function(responseTxt) {
											if (responseTxt.code == 0) {
												$(".layui-laypage-btn").click();
											} else {
												layer.msg(responseTxt.msg);
											}
										}
									});
								});
								// layer.msg("删除");
							}
							break;
					}
				});

				//监听行工具事件
				table.on("tool(test)", function(obj) {
					//注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
					var data = obj.data, //获得当前行数据
						layEvent = obj.event; //获得 lay-event 对应的值
					if (layEvent === "del") {
						layer.confirm("真的删除行么", function(index) {
							// obj.del(); //删除对应行（tr）的DOM结构

							layer.close(index);
							//向服务端发送删除指令
							$.ajax({
								type: "post",
								url: "/admin/white_ip/del",
								data: { id: data.id },
								success: function(responseTxt) {
									if (responseTxt.code == 0) {
										$(".layui-laypage-btn").click();
									} else {
										layer.msg(responseTxt.msg);
									}
								}
							});
						});
					} else if (layEvent === "edit") {
						// layer.msg("编辑操作");
						layer.open({
							title: "编辑操作",
							skin: "layui-layer-rim", //加上边框
							maxmin: true,
							type: 2,
							content: "/admin/white_ip/edit?id=" + data.id,
							area: ["360px", "240px"],
							end: function() {
								$(".layui-laypage-btn").click();
							}
						});
					}
				});
				//分页
				laypage.render({
					elem: "pageDemo", //分页容器的id
					count: 100, //总页数
					skin: "#1E9FFF", //自定义选中色值
					//,skip: true //开启跳页
					jump: function(obj, first) {
						if (!first) {
							layer.msg("第" + obj.curr + "页", { offset: "b" });
						}
					}
				});
			});
		</script>
	</body>
</html>
